<style scoped>
.ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  color: #2d8cf0;
  background: #e3f2fd;
  z-index: 2;
}
.ivu-layout-header {
  padding: 0 0px;
  height: 60px;
  color: #8a8a8a;
}
.ivu-menu-dark.ivu-menu-horizontal .ivu-menu-item,
.ivu-menu-dark.ivu-menu-horizontal .ivu-menu-submenu {
  color: #8a8a8a;
}
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.logo {
  position: absolute;
  font-size: 20px;
}
.layout-nav {
  width: 550px;
  margin: 0 auto;
  margin-left: 1400px;
}
.footer {
  height: 13px;
  text-align: center;
}
a {
  color: #8a8a8a;
  font-size: 14px;
}
</style>
<template>
  <div class="layout">
    <Layout>
      <Header>
        <Menu mode="horizontal" theme="dark">
          <div>
            <router-link to="/main/myInfo">
              <MenuItem class="logo" name="1">
                <Icon type="ios-hand-outline" size="27"></Icon>
                教师评教管理系统
              </MenuItem>
            </router-link>
          </div>
          <div class="layout-nav">
            <Dropdown>
              <a href="javascript:void(0)">
                <Icon type="ios-ionitron-outline"></Icon>
                {{ myInfo.name }}
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <router-link to="/main/myInfo"
                  ><DropdownItem>个人主页</DropdownItem></router-link
                >
                <DropdownItem @click.native="quit" divided
                  >退出系统</DropdownItem
                >
              </DropdownMenu>
            </Dropdown>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{ background: '#ffffff' }">
          <!-- <Menu theme="light" width="auto" :open-names="['1']">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-cog-outline" size="19"></Icon>
                系统管理
              </template>
              <router-link to="/main/selectUser"
                ><MenuItem name="1-1">用户管理</MenuItem></router-link
              >
              <router-link to="/main/selectRole"
                ><MenuItem name="1-2">角色管理</MenuItem></router-link
              >
              <router-link to="/main/selectMenu"
                ><MenuItem name="1-3">菜单管理</MenuItem></router-link
              >
            </Submenu>
          </Menu> -->

          <Menu
            width="auto"
            ref="side_menu"
            theme="light"
            v-for="(menuItem, menuIndex) in myMenu"
            :key="menuIndex"
            :active-name="$route.meta.title"
          >
            <MenuItem
              v-if="!menuItem.children || menuItem.children.length == 0"
              :key="menuIndex"
              :name="menuItem.name"
              :to="menuItem.appUrl"
            >
              <e-icon
                v-if="menuItem.imgUrl"
                :icon-name="menuItem.imgUrl"
              ></e-icon>
              <span>{{ menuItem.name }}</span>
            </MenuItem>

            <Submenu v-else :name="menuItem.name">
              <template slot="title">
                <e-icon
                  v-if="menuItem.imgUrl"
                  :icon-name="menuItem.imgUrl"
                ></e-icon>
                <span>{{ menuItem.name }}</span>
              </template>
              <MenuItem
                v-for="(item, index) in menuItem.children"
                :key="index"
                :name="item.name"
                :to="item.appUrl"
              >
                <e-icon v-if="item.imgUrl" :icon-name="item.imgUrl"></e-icon>
                {{ item.name }}</MenuItem
              >
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{ padding: '0 24px 24px' }">
          <Content
            :style="{ padding: '24px', minHeight: '585px', background: '#fff' }"
          >
            <router-view> </router-view>
          </Content>
          <Footer class="layout-footer-center footer"
            >@2021 IN
            410ZOO&nbsp;&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;🐂🐎⭐🐓🐟😸😇</Footer
          >
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import myInfo from "./SysUser/myInfo.vue";
import util from "@/view/util.js";
export default {
  components: { myInfo },
  data() {
    return {
      tab0: true,
      //登录用户信息
      myInfo: {},
      //侧边栏菜单信息
      myMenu: {},
    };
  },
  created() {
    //初始化获得用户信息
    this.myInfo = this.$store.state.myInfo;
    this.$Message.info({
      duration: 2.5,
      background: true,
      content: "欢迎回来~",
    });
    //初始化获得菜单信息
    this.getMenu();
  },

  mounted() {
    var that = this;
    util.$on("menu", function (msg) {
      console.log(msg);
      that.getMenu();
    });
  },
  methods: {
    //退出系统
    quit() {
      this.$axios
        .get("/user/quit")
        .then((result) => {
          if (result.data.code == 0) {
            this.$store.commit("userStatus", null);
            this.$router.push("/login");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //根据登录用户id获得侧边栏菜单数据
    getMenu() {
      this.$axios
        .get("/menu/ListTreeData4", {
          params: {
            id: this.$store.state.myInfo.id,
          },
        })
        .then((result) => {
          if (result.data.code == 0) {
            this.myMenu = result.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
